<template>

    <div>
        <el-dialog style="margin-top:5vh" v-model="mer_off" :title="title" :close-on-click-modal='false'
            @close="handleClose" :width="off_btn_num == 1 ? '43%' : '85%'">

            <el-tabs type="card" v-model="tabs_activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="飞机" name="飞机">
                    <aircraft @paymentCarMd="paymentCarMd" @show_btn="show_btn" @off_Click="off_btn"
                        v-if="tabs_activeName == '飞机'"></aircraft>
                </el-tab-pane>
                <el-tab-pane label="火车" name="火车">
                    <train @paymentCarMd="paymentCarMd" @show_btn="show_btn" @off_Click="off_btn"
                        v-if="tabs_activeName == '火车'"></train>
                </el-tab-pane>
                <el-tab-pane label="集合点" name="集合点">
                    <bus @paymentCarMd="paymentCarMd" @show_btn="show_btn" @off_Click="off_btn"
                        v-if="tabs_activeName == '集合点'"></bus>
                </el-tab-pane>
                <el-tab-pane label="包车" name="包车">
                    <chartered_bus @paymentCarMd="paymentCarMd" @show_btn="show_btn" @off_Click="off_btn"
                        v-if="tabs_activeName == '包车'">
                    </chartered_bus>
                </el-tab-pane>

            </el-tabs>
        </el-dialog>
        <payment v-if="payment_off" @paymentCarMd="paymentCarMd" :data="payment_off"
            :id="payment_id" :payment_data='payment_data'></payment>
    </div>

</template>

<script setup>

import { ref, reactive, onMounted, computed, watch, } from 'vue'
import aircraft from './aircraft.vue'
import train from './train.vue'
import bus from './bus.vue'
import chartered_bus from './chartered_bus.vue'
import payment from '../payment.vue'
onMounted(() => {
    off_btn_num.value = 1
})

const tabs_activeName = ref('飞机')
const handleClick = (tab, event) => {
    tabs_activeName.value = tab.props.name
    off_btn_num.value = 1
}
const off_btn_num = ref(1)
//#region 付费
const payment_id = ref('')
const payment_data = ref({})
const payment_off = ref(false)

const paymentCarMd = (e, b) => {
    payment_off.value = false
    payment_data.value = {}
    if (e) {
        payment_off.value = false
        payment_data.value = {}
        payment_data.value = b

        payment_id.value = ''
        payment_id.value = e
        setTimeout(() => {
            payment_off.value = true
        }, 1000);
    }


}
//#endregion

//#region 弹框控制
const props = defineProps(["data"]);
const mer_off = ref(props.data)
const title = ref('添加订单')
const emit = defineEmits(['disCarMd'])
const handleClose = () => {
    emit('disCarMd', false);
}

const off_btn = (e) => {
    if (e == 1) {
        off_btn_num.value = 1
    } else if (e == 2) {
        off_btn_num.value = 2
    }

}
const show_btn = () => {

    emit('disCarMd', false);
}



//#endregion
</script>

<style scoped lang='scss'>
:deep(.el-tabs__item.is-active) {

    background: #409EFF !important;
    color: #ffffff !important;
}

.form_Css>.el-form-item {
    margin-right: 10px !important;
}

.div_map {
    position: relative;
    left: 0;
    top: 0;
}

.map_input {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.map_input2 {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    top: 34px;

}

.div_bg:hover {


    background-color: darkgray;
}
</style>

<style>
.el-table .el-table__cell {
    padding: 0px !important;
}



#tab-aircraft_deliver {
    color: red;
}

#tab-train_deliver {
    color: red;
}

#tab-bus_deliver {
    color: red;
}

.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}
</style>
